<template>
  <el-dialog title="修改信息" :visible.sync="dialogFormVisible" width="35%">
    <template>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="修改头像" name="first">
          <el-form label-position="right" label-width="100px">
            <br/>
            <el-form-item label="上传图片">
              <el-upload
                class="avatar-uploader"
                :action="uploadFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" >
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="原密码"  prop="oldPassword">
              <el-input v-model="form.oldPassword" type="e-mail"></el-input>
            </el-form-item>
            <br />
            <el-form-item  label="新密码" prop="newPassword">
              <el-input v-model="form.newPassword" type="password" ></el-input>
            </el-form-item>
            <br />
            <el-form-item  label="确认密码" prop="password">
              <el-input v-model="form.password" type="password" ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取消</el-button>
        <el-button type="primary" @click="update('form')">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'user',
  // created () {
  //   console.log(this.email)
  // },
  data () {
    return {
      uploadFile: '',
      email: '',
      autoUpload: true, // 自动上传
      imageName: '', // 模型数据，用于上传图片完成后图片预览
      imageUrl: '',
      activeName: 'first', // 添加/编辑窗口Tab标签名称
      form: {
        oldPassword: '',
        newPassword: '',
        password: ''
      },
      dialogFormVisible: false,
      rules: {
        newPassword: [{required: true, message: '请输入新密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur'}],
        oldPassword: [{required: true, message: '请输入原密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur'}],
        password: [{required: true, message: '请输入确认密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur'}]
      }
    }
  },
  methods: {
    cancel: function (formName) {
      if (this.activeName === 'first') {
        this.cancelSubmit()
      } else {
        this.cancelUpdate(formName)
      }
    },
    update: function (formName) {
      if (this.activeName === 'first') {
        this.updatePicture()
      } else {
        this.updatePassword(formName)
      }
    },
    resetForm: function (formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    cancelUpdate: function (formName) {
      this.$message.info('操作取消！')
      this.resetForm(formName)
    },
    updatePassword: function (formName) {
      if (this.form.newPassword !== this.form.password) {
        this.$message.error('两次输入密码不一致！')
        return
      }
      this.$axios.post('/user/updatePassword/' + this.email, this.form).then((res) => {
        if (res.data.flag === false) {
          this.$message.error('原密码错误！')
        } else {
          this.$message.success('修改成功，即将退出系统！')
          this.resetForm(formName)
          setTimeout(this.$parent.$parent.logout(), 2000)
        }
      })
    },
    cancelSubmit: function () {
      this.dialogFormVisible = false
      this.$axios.delete('/user/' + this.email + '/' + this.imageName).then((res) => {
        this.$message.info('操作取消！')
      })
      this.imageUrl = ''
    },
    updatePicture: function () {
      this.dialogFormVisible = false
      this.$axios.put('/user/' + this.email + '/' + this.imageName).then((res) => {
        if (res.data.flag === true) {
          this.$message.success('头像保存成功！')
        } else {
          this.$message.error('头像保存失败！')
        }
      }
      )
      this.$parent.$parent.user.image = 'http://rd3ehgzse.hn-bkt.clouddn.com/' + this.imageName
      this.imageUrl = ''
    },
    handleAvatarSuccess: function (res, file) {
      // vue.imageUrl = URL.createObjectURL(file.raw);
      if (res.flag === true) {
        this.$message.success(res.msg)
      } else {
        this.$message.error(res.msg)
      }
      this.imageName = res.data
      this.imageUrl = 'http://rd3ehgzse.hn-bkt.clouddn.com/' + this.imageName
    },
    beforeAvatarUpload: function (file) {
      var isPicture
      if (file.type === 'image/jpeg' || file.type === 'image/png') {
        isPicture = true
      } else {
        isPicture = false
      }
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isPicture) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isPicture && isLt5M
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-icon-plus {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-icon-plus:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.dialog-footer{
  text-align: center;
}

</style>
